<style lang="less" scoped>
  @import './caps.less';
</style>

<template>
  <div class="page container caplist">
    <a-card
      title="帽子"
      :bordered="false"
      class="card-content"
    >
      <div class="caplist-main">
        <article class="caplist-summary">
          <h4>认证一个帽子</h4>
          <p>帽子是在为项目，组织或公司发言时发表评论的一种正式，经过验证的方式。每个用户可能有多顶帽子，在发表评论或发送私信时，可以选择其中一顶帽子。帽子是为了发表公开声明，而不是为了纪念对某个项目或工作所作的贡献。只有当你在这里表现得很正式的时候，比如你是一个核心项目开发人员或公司雇员，被授权代表你组织发布信息的时候，你才可以申请一个。Hats通常保留给重要项目和组织。</p>
          <p>为您的帐户申请一个帽子，提供一个简短描述的帽子(例如,“OpenBSD开发人员”)，一个公开的链接会显示当悬停在用户可以看到的帽子，如您的电子邮件在那个项目或公司，或一个公司网站链接显示你的就业，和私人言论只会被版主在批准。如果您将GitHub或Twitter帐户链接到您的Lobsters帐户，并在您的评论中链接到该组织链接到该公共帐户的地方，这将非常有用。然后我们可以立即看到你是合法的，而不必发送验证电子邮件。当你不能再为一个项目或公司发言时，请联系版主、管理员摘下你的帽子。旧的信息仍然会显示它，您将不能再次使用它。</p>
        </article>

        <section class="caplist-form">
          <div class="form-wrapper">
            <a-form-model
              ref="form"
              :model="form"
              :rules="rules"
            >
              <a-form-model-item
                ref="name"
                label="帽子"
                prop="name"
              >
                <a-input
                  v-model="form.name"
                  size="large"
                  placeholder="XYZ项目成员"
                />
              </a-form-model-item>

              <a-form-model-item
                ref="link"
                label="链接"
                prop="link"
              >
                <a-input
                  v-model="form.link"
                  size="large"
                  placeholder="user@project.org,or a URL to an employment page"
                />
              </a-form-model-item>

              <a-form-model-item
                label="内容"
                prop="content"
              >
                <v-comment-textarea>
                  <a-textarea
                    v-model="form.content"
                    placeholder="只会在审核期间显示给版主。请连接到讨论，这顶帽子将是有用的发言代表您的项目。"
                  />
                </v-comment-textarea>
              </a-form-model-item>
            </a-form-model>
          </div>

          <footer class="caplist-foot">
            <a-button
              size="large"
              type="primary"
              @click="onCertHandle"
            >
              认证帽子
            </a-button>
          </footer>
        </section>
      </div>
    </a-card>
  </div>
</template>

<script>
import CommentTextarea from '~/components/comment-textarea'

export default {
  components: {
    'v-comment-textarea': CommentTextarea,
  },

  data () {
    return {
      form: {
        name: '',
        link: '',
        content: '',
      },

      rules: {
        name: [
          { required: true, message: '请输入项目成员', trigger: 'blur' },
        ],
        link: [
          { required: true, message: '请输入链接', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    onCertHandle () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
